<div class="tw-mt-auto">
  <!-- [attr.icon] is used to keep the icon attribute on the bit-nav-item after prod mode is enabled. Matches other navigation items and assists in automated testing. -->
  <bit-nav-item
    *ngFor="let product of accessibleProducts$ | async"
    [icon]="product.icon"
    [text]="product.name"
    [route]="product.appRoute"
    [attr.icon]="product.icon"
    [forceActiveStyles]="product.isActive"
  >
  </bit-nav-item>
  <ng-container *ngIf="moreProducts$ | async as moreProducts">
    <section
      *ngIf="moreProducts.length > 0"
      class="tw-mt-2 tw-flex tw-w-full tw-flex-col tw-gap-2 tw-border-0"
    >
      <span class="tw-text-xs !tw-text-alt2 tw-p-2 tw-pb-0">{{ "moreFromBitwarden" | i18n }}</span>
      <ng-container *ngFor="let more of moreProducts">
        <div class="tw-ps-2 tw-pe-2">
          <!-- <a> for when the marketing route is external -->
          <a
            *ngIf="more.marketingRoute.external"
            [href]="more.marketingRoute.route"
            target="_blank"
            rel="noreferrer"
            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
          >
            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
            <div>
              {{ more.otherProductOverrides?.name ?? more.name }}
              <div
                *ngIf="more.otherProductOverrides?.supportingText"
                class="tw-text-xs tw-font-normal"
              >
                {{ more.otherProductOverrides.supportingText }}
              </div>
            </div>
          </a>
          <!-- <a> for when the marketing route is internal, it needs to use [routerLink] instead of [href] like the external <a> uses. -->
          <a
            *ngIf="!more.marketingRoute.external"
            [routerLink]="more.marketingRoute.route"
            rel="noreferrer"
            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
          >
            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
            <div>
              {{ more.otherProductOverrides?.name ?? more.name }}
              <div
                *ngIf="more.otherProductOverrides?.supportingText"
                class="tw-text-xs tw-font-normal"
              >
                {{ more.otherProductOverrides.supportingText }}
              </div>
            </div>
          </a>
        </div>
      </ng-container>
    </section>
  </ng-container>
</div>
